<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#page #viewer {
				position: absolute;
				width: 100%;
				height: 90%;
			}
		</style>
		<script src="js/new-engine/3dEngine_newest.js" type="text/javascript"></script>
		<script src="js/require.js" type="text/javascript"></script>
		<script src="js/require-config.js" type="text/javascript"></script>
		<script type="text/javascript">
			(function() {
				require(["jquery", "vue"], function($, Vue) {
					$(function() {
						new Vue({
							el: "#page",
							data() {
								return {
									//模型数据
									model: {
										id: "01",
										fileName: "ZXYY_CE_Arc_A_F1",
									},
									//框选模式是否已启动
									reckCheckStarted: false
								}
							},
							mounted: function() {
								this.init();
							},
							methods: {
								init() {
									if(!document.getElementById("viewer")){
										alert("ID为viewer的容器标签未定义");
										return;
									}
									//初始化引擎
									window.EngineInit("viewer");
									window.onload();
									//设置事件
									window.OnLoadModelEnd = tag => this.loadModelEnd(tag);
									window.OnSelectionChanged = tag => this.selectionChanged(tag);
									//加载模型
									window.AddModel('models/' + this.model.fileName + '/' + this.model.fileName + 'List.json', this.model.id);
								},
								//模型加载完成
								loadModelEnd(tag) {
									alert("模型" + tag + "加载完成");
								},
								//修改框选模式
								changeReckCheckMode() {
									if(!this.reckCheckStarted) {
										//启动模型框选模式
										window.StartRectCheck(1);
										window.SetClickMode(2);
									} else {
										//关闭模型框选
										window.CloseRectCheck();
										window.SetClickMode(0);
									}
									this.reckCheckStarted = !this.reckCheckStarted;
								},
								//模型构件被选中
								selectionChanged(tag) {
									alert("框选的构件ID：" + tag);
								}
							}
						});
					});
				});
			})();
		</script>
	</head>

	<body>
		<div id="page">
			<div id="viewer"></div>
			<div style="position: absolute; left: 100px;top: 100px;">
				<input type="button" :value="reckCheckStarted?'关闭框选':'启动框选'" @click="changeReckCheckMode" />
			</div>
		</div>
	</body>

</html>